<template>
  <div v-loading="loading" style="width: 100vw;height: 100vh;background: #EEEEEE">
  <top :title="title" :isSecond="1"/>
  <el-row>
    <div class="feedbackItem" v-for="(item, index) in feedbackList" :key="index">
      <div class="item-first">
        <span style="margin-right: 8vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.time }}</span>
        <span>{{ item.title }}</span>
      </div>
      <p class="item-content">
        {{ item.content }}
      </p>
      <el-row >
        <div class="item-type">
          <span v-if="item.type===0" style="font-weight: bold;color:red">待解决</span>
          <span v-else style="font-weight: bold;color:green">已解决</span>
        </div>
      </el-row>
    </div>
  </el-row>
  <el-row>
    <el-button type="primary" @click="goToNew">新建反馈</el-button>
  </el-row>
  <bottom/>
</div>
</template>

<script>
import top from '@/components/top'
import bottom from '@/components/bottom'
export default {
  name: 'feedback',
  data () {
    return {
      loading: false,
      title: '我的反馈',
      feedbackList: [
        {
          time: '2021/6/1',
          title: '成绩',
          content: '2018年学年成绩无法查绩无法查绩无法查绩无法查绩无法查询到',
          type: 0
        }, {
          time: '2021/6/1',
          title: '成绩',
          content: '2018年学年成绩无法查绩无法查绩无法查绩无法查绩无法查询到',
          type: 1
        }
      ]
    }
  },
  methods: {
    goToNew () {
      this.$router.push('newFeedback')
    }
  },
  components: {
    top,
    bottom
  }
}
</script>

<style lang="stylus" scoped>
.feedbackItem
  width: 84vw
  height: auto
  background: white
  margin: 4vh auto
  padding-bottom: 2vh
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 4vw;
  display flex
  flex-direction column
  justify-content flex-start
  align-items center
.item-first
  width: 72vw
  height: 6vh
  display flex
  justify-content flex-start
  align-items center
.item-content
  width: 72vw
  //height 20vh
.item-type
  margin-top: 2vh
  width: 72vw
  height: 2vh
  display: flex
  align-items: center
  justify-content: flex-end
</style>
